<template>
  <div>
    <Echart
        :options="options"
        id="centreLeft1Chart"
        height="240px"
        width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
// import * as  echarts from "echarts";

export default {
  data() {
    return {
      options: {},
      // 定义颜色
      colorList: {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(35,184,210,.2)'
            },
            {
              offset: 1,
              color: 'rgba(35,184,210,0)'
            }
          ]
        }
      }
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        this.options = {
          // backgroundColor: '#222',
          title: {
            text: '',
            left: 30,
            // 文字颜色
            textStyle: {
              color: '#4c9bfd'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: "10%",
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // 文字颜色

            axisLabel: {
              textStyle: {
                fontFamily: 'PingFang SC',
                fontSize: 12,
                // fontWeight: '300',
                color: '#B7F2FF'
              }
            },
            data: newData.weekCategory
          },
          yAxis: {
            /* 刻度为数据最大刻度 */
            max: 'dataMax',
            type: 'value',
            // 文字颜色
            axisLabel: {
              textStyle: {
                fontFamily: 'PingFang SC',
                fontSize: 12,
                // fontWeight: '300',
                color: '#B7F2FF'
              }
            },
            //修改刻度颜色
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3)'
              }
            }
          },
          series: [
            {
              name: '111',
              type: 'line',
              stack: '总量',
              colorBy: 'data',
              //曲线
              smooth: true,
              //圆圈大小
              symbolSize: 8,
              itemStyle: {
                color: (params) => params.data > 100 ? '#F57617' : '#24D6D6'
              },
              lineStyle: {
                color: '#00f2f1'
              },
              label: {
                show: true,
                color: '#00f2f1',
              },
              data: newData.weekLineData,
              /* animationDelay: function (idx) {
                 // 越往后的数据延迟越大
                 return idx * 200;
              } */
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
